<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小组作业</title>
<link rel="stylesheet" href="https://cdn.staticfile.net/font-awesome/4.7.0/css/font-awesome.css">
<link href="css/bootstrap-4.3.1.css" rel="stylesheet" type="text/css">
	<link rel="stylesheet" href="css/comm.css">
	<link rel="stylesheet" href="css/home.css">
</head>
<body>
	<div class="j-nav" id="top">
		<div class="logo-img"><img src="images/logo.png" width="100%" height="100%" alt=""></div>
		<ul class="nav-list j-sm-display-none">
			<li>首页</li>
			<li>作品</li>
			<li><a href="zhang.html">分享</a></li>
			<li>我的</li>
			<li>关于</li>
		</ul>
		<div class="nav-form j-flex j-sm-display-none">
			<input type="text">
			<button>搜索</button>
  		</div>
		<div class="open-side j-displaynone float-right" style="cursor: pointer">
			<i class="fa fa-list" style="font-size:30px;color: white;padding: 18px;display: block"></i>
			<i class="fa fa-align-justify" style="font-size:30px;color: white;padding: 18px;display: none"></i>
		</div>
	</div>
	<div class="main-mask"></div>
	<div class="nav-side">
		<div class="sm-nav-form j-flex">
			<input type="text">
			<button>搜索</button>
  		</div>
		<ul class="sm-nav-list">
			<li>首页</li>
			<li>作品</li>
			<li><a href="zhang.html">分享</a></li>
			<li>我的</li>
			<li>关于</li>
		</ul>
	</div>
	<div class="main-img">
		<div class="img-mask">
			<div style="height: 100%;width: 100%" class="j-flex j-align-items-center j-justify-content-center">
				<div class="img-text">
					<h1 class="text-center text-light main-title" style="letter-spacing: 0.2em;">WEB与信息时代</h1>
					<div class="dropdown-divider" style="background-color: orange;width: 250px;margin:15px auto;height: 5px;border-radius: 10px"></div>
					<p style="color: white;margin-top: 40px">Web时代的意义和前景是广泛而深远的，它改变了人们的生活方式、工作方式，甚至思维方式。<br>The significance and prospects of the Web era are broad and far-reaching, and it has changed the way people live, work, and even think.</p>
					<a href="#title" style="float:right;color: white;text-decoration: none" class="font-weight-bold">了解更多&nbsp;<i class="fa fa-angle-double-right" style="font-size:20px"></i></a>
				</div>
			</div>
		</div>
	</div>
	<div class="container j-mt70 an" style="opacity: 0">
		<h3 style="letter-spacing: .3rem" class="text-center" id="title">WEB与信息时代</h3>
		<div class="dropdown-divider" style="background-color: orange;width: 250px;margin:15px auto;height: 5px;border-radius: 10px"></div>
		<p class="p-2 mt-3" style="letter-spacing: .1rem"><span class="font-weight-bold">意义：</span>Web技术使得全球范围内的信息都可以轻松获取，极大地拓宽了人们的视野，使得知识的传播和学习变得更加高效。Web平台为人们提供了多样化的交流方式，如社交媒体、在线论坛等，使得人们可以跨越地域限制，实现实时交流和互动。Web技术的发展催生了众多新的商业模式，如电子商务、在线教育、远程办公等，为经济增长和就业创造了更多机会。Web时代的来临也推动了社会的进步和发展，如数字化政府、智慧城市等项目的实施，提高了社会管理和服务的效率。</p>
		<p class="p-2" style="letter-spacing: .1rem"><span class="font-weight-bold">前景：</span>
随着云计算、大数据、人工智能等技术的不断发展，Web时代的技术基础将更加坚实，为人们提供更加优质、高效的服务。
随着大数据和人工智能技术的应用，Web平台将能够更准确地了解用户的需求和偏好，提供个性化的服务，提升用户体验。
Web技术将促进不同产业的融合和创新，形成新的产业链和生态圈，推动经济的持续发展。
Web时代将进一步推动全球化的进程，使得不同国家和地区的人们能够更加紧密地联系在一起，共同推动世界的进步和发展。</p>
	</div>
	<div class="j-container" style="margin-top: 100px">
		<h3 class="text-center">Web开发技术</h3>
		<div class="dropdown-divider" style="background-color: orange;width: 190px;margin:auto;height: 5px;border-radius: 10px"></div>
		<div class="mt-4 j-flex j-justify-content-around">
			<div class="skill-box">
				<img src="images/skillpng.png" width="100%" height="auto"  alt="">
				<h5 class="text-center mt-3">Vue</h5>
				<p>Vue是一套构建用户界面的渐进式框架。</p>
			</div>
			<div class="skill-box">
				<img src="images/skillpng.png" width="100%" height="auto"  alt="">
				<h5 class="text-center mt-3">Vue</h5>
				<p>Vue是一套构建用户界面的渐进式框架。</p>
			</div>
			<div class="skill-box">
				<img src="images/skillpng.png" width="100%" height="auto"  alt="">
				<h5 class="text-center mt-3">Vue</h5>
				<p>Vue是一套构建用户界面的渐进式框架。</p>
			</div>
			<div class="skill-box">
				<img src="images/skillpng.png" width="100%" height="auto"  alt="">
				<h5 class="text-center mt-3">Vue</h5>
				<p>Vue是一套构建用户界面的渐进式框架。</p>
			</div>
		</div>
	</div>
	<div class="footer j-mt70" style="margin-top:100px">
		<div class="j-container j-flex j-justify-content-around">
			<div class="footer-sharp">
				<p class="text-center text-light" style="font-size: 1rem;">交流一下</p>
				<input type="text" class="inp-sharp" placeholder="输入您的用户名" style="height: 30px;">
				<textarea type="text" class="inp-sharp" placeholder="分享一下您的想法" style="height: 100px;margin-top: 10px"></textarea>
				<button>提交</button>
			</div>
			<div class="footer-end">
				<p class="text-center" style="font-size: 1rem;">学习园地</p>
				<div class="j-flex j-justify-content-center imglist">
					<a href="https://www.runoob.com/"><img src="images/footer1.png" alt="" width="50px" height="50px"></a>
					<a href="https://www.runoob.com/"><img src="images/footer2.jpg" alt="" width="50px" height="50px"></a>
					<a href="https://www.runoob.com/"><img src="images/footer3.jpg" alt="" width="50px" height="50px"></a>
					<a href="https://www.runoob.com/"><img src="images/footer1.png" alt="" width="50px" height="50px"></a>
					<a href="https://www.runoob.com/"><img src="images/footer2.jpg" alt="" width="50px" height="50px"></a>
					<a href="https://www.runoob.com/"><img src="images/footer3.jpg" alt="" width="50px" height="50px"></a>
				</div>
			</div>
		</div>
		<p class="text-center text-light p-2" style="margin: 0">顺职2班第一组</p>
	</div>
	<div class="sidebar-open j-flex j-justify-content-center j-align-items-center" style="opacity: 0">
		<a href="#" class="fa fa-chevron-up" style="font-size:20px;color: white;text-decoration: none"></a>
	</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap-4.3.1.js"></script>
	<script src="js/home.js"></script>
</body>
</html>
